import React, { Component } from 'react'
import { Link } from 'react-router'
import { Table, Spin, Button, Icon, message } from 'antd'
import Ajax from 'lib/Ajax'
import { confirmDelete } from 'lib/fun'

class ModuleName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      loading: false,
      visible: false,
      editType: '',
      editId: ''
    }
    // 翻页相关
    this.current = 1;   //当前第几页
    this.total = 10;   //总共多少页
    this.pageSize = 10;   //每页多少行
    this.search = {};
    this.api = {
      list: '',
      get: '',
      save: '',
      delete: ''
    }
    this.itemKey = '';
  }

  componentDidMount(){
    this.loadData();
  }

  pageOnChange = (page)=>{
    this.current = page;
    this.loadData();
  }

  showSizeChange = (current, pageSize)=>{
    var page = Math.ceil(((this.current-1)*this.pageSize+1)/pageSize);
    this.pageSize = pageSize;
    this.current = page;
    this.loadData();
  }

  loadData = ()=>{
    var self = this;
    self.setState({
      loading: true
    });
    Ajax({
      url: this.api.list,
      data: Object.assign({
        "currentPage": self.current,  //请求页码
        "perPage": self.pageSize,   //每页数量
      }, self.search),
      success: function(data){
        self.total = data.totalCount;
        self.setState({
          loading: false,
          data: data.list
        });
      },
      error: function(error){
        self.setState({
          loading: false
        });
        message.error(error);
      }
    });
  }

  // 操作
  operate = (type, id)=>{
    if(type == 'edit'){
      this.setState({
        visible: true,
        editType: 'edit',
        editId: id
      });
    }else{
      this.setState({
        visible: true,
        editType: 'new',
        editId: ''
      });
    }
  }

  editOk = (type)=>{
    this.setState({
      visible: false
    });
    if(type != 'edit'){
      this.current = 1;
    }
    this.loadData();
  }

  editCancel = ()=>{
    this.setState({
      visible: false
    });
  }

  doDelete = (id)=>{
    var self = this;
    confirmDelete(()=>{
      Ajax({
        url: self.api.delete,
        data: {
          [self.itemKey]: id
        },
        success: function(data){
          self.loadData();
        },
        error: function(error){
          message.error(error);
        }
      });
    }, ()=>{
      message.info('取消删除');
    });
  }

  renderFilter = () => {
    return ''
  }

  renderOther = () => {
    return ''
  }

  renderTitle = () => {
    return <Button type="primary" style={{marginRight: 15}} icon="plus" onClick={ this.operate.bind(this, 'new') }>新建</Button>
  }

  renderEdit = () => {}

  render() {
    const pagination = {
      current: this.current,
      total: this.total,
      pageSize: this.pageSize,
      onChange: this.pageOnChange,
      // showSizeChanger: true,
      // onShowSizeChange: this.showSizeChange
      showTotal: () =>
        <span>
          共{this.total}条
        </span>
    };
    return (
      <div className="list">
        <Spin spinning={this.state.loading}>
          {this.renderFilter()}
          <div className="page-title">
            {this.renderTitle()}
          </div>
          <div className="list-con">
            <div className="clearfix">
              <Table
                columns={ this.columns }
                dataSource={ this.state.data }
                pagination={ pagination }
                rowKey={this.itemKey}
                bordered
              />
            </div>
          </div>
          {this.renderEdit()}
          {this.renderOther()}
        </Spin>
      </div>
    )
  }
}

module.exports = ModuleName
